<template>
	<view>
		<!-- 排序|筛选 -->
		<view class="d-flex border-top border-bottom a-center" style="height: 100upx;">
			<view class="flex-1 d-flex j-center a-center font-md" v-for="(item,index) in screen.list" :key="index"
				@tap='changeHandle(index)'>
				<text :class="screen.currentIndex === index?'main-text-color':'text-muted'">{{item.name}}</text>
				<view>
					<view class="iconfont icon-paixu-shengxu line-h0"
						:class="item.status===1?'main-text-color':'text-light-muted'"></view>
					<view class="iconfont icon-paixu-jiangxu line-h0"
						:class="item.status===2?'main-text-color':'text-light-muted'"></view>
				</view>
			</view>

			<view class="flex-1 d-flex j-center a-center font-md" @tap="showRight = true">
				<text class="main-text-color">筛选</text>
			</view>
		</view>
		<!-- 列表 -->
		<block v-for="(item,index) in searchList" :key="index">
			<search-list :item="item" :index="index"></search-list>
		</block>
		<!-- 抽屉 -->
		<uni-drawer :visible="showRight" mode="right" @close="showRight = false">
			<card head-title="标题" :headerBorderBottom="false" :headerTitleWeight="false">
				<!-- 单选按钮组 -->
				<wxd-radio-group :obj="radioBtnList" :selected.sync="radioBtnList.selected"></wxd-radio-group>
			</card>
			<!-- 底部按钮 -->
			<view class="d-flex position-fixed bottom-0 right-0 w-100 border-top border-light-secondary">
				<view class="flex-1 main-bg-color text-white font-md py-2 text-center"
					hover-class="main-bg-hover-color">
					确定
				</view>
				<view class="flex-1 font-md py-2 text-center" hover-class="bg-light-secondary">
					重置
				</view>
			</view>
		</uni-drawer>
	</view>
</template>

<script>
	import uniDrawer from '@/components/uni-ui/uni-drawer/uni-drawer.vue'
	import card from '../../components/common/card.vue'
	import wxdRadioGroup from '@/components/common/radio-group.vue'
	import searchList from "@/components/search-list/search-list.vue"
	export default {
		components: {
			uniDrawer,
			card,
			wxdRadioGroup,
			searchList
		},
		data() {
			return {
				searchList: [{
					title: '真无线蓝牙耳机',
					titlepic: '/static/images/demo/demo6.jpg',
					desc: '雅致简约 / 分体式入耳 / 收纳盒充电 / 蓝牙5.0 / 触控操作',
					pprice: '100',
					comment_num: 1300,
					good_num: '98%'

				},
				{
					title: '真无线蓝牙耳机',
					titlepic: '/static/images/demo/demo6.jpg',
					desc: '雅致简约 / 分体式入耳 / 收纳盒充电 / 蓝牙5.0 / 触控操作',
					pprice: '100',
					comment_num: 1300,
					good_num: '98%'
				
				},
				{
					title: '真无线蓝牙耳机',
					titlepic: '/static/images/demo/demo6.jpg',
					desc: '雅致简约 / 分体式入耳 / 收纳盒充电 / 蓝牙5.0 / 触控操作',
					pprice: '100',
					comment_num: 1300,
					good_num: '98%'
				
				},
				{
					title: '真无线蓝牙耳机',
					titlepic: '/static/images/demo/demo6.jpg',
					desc: '雅致简约 / 分体式入耳 / 收纳盒充电 / 蓝牙5.0 / 触控操作',
					pprice: '100',
					comment_num: 1300,
					good_num: '98%'
				
				},
				{
					title: '真无线蓝牙耳机',
					titlepic: '/static/images/demo/demo6.jpg',
					desc: '雅致简约 / 分体式入耳 / 收纳盒充电 / 蓝牙5.0 / 触控操作',
					pprice: '100',
					comment_num: 1300,
					good_num: '98%'
				
				},
				{
					title: '真无线蓝牙耳机',
					titlepic: '/static/images/demo/demo6.jpg',
					desc: '雅致简约 / 分体式入耳 / 收纳盒充电 / 蓝牙5.0 / 触控操作',
					pprice: '100',
					comment_num: 1300,
					good_num: '98%'
				
				}],
				showRight: false,
				screen: {
					currentIndex: 0,
					// status  1:升序 2:降序 0:没状态
					list: [{
							name: '综合',
							status: 1
						},
						{
							name: '销量',
							status: 0
						},
						{
							name: '价格',
							status: 0
						},
					]
				},
				radioBtnList: {
					selected: 0,
					list: [{
							name: '选项1'
						},
						{
							name: '选项1'
						},
						{
							name: '选项1'
						}
					]
				}
			}
		},
		methods: {
			radioCliHandle(index) {
				this.radioBtnList.selected = index
			},
			changeHandle(index) {
				// 拿到旧的index值
				let oldIndex = this.screen.currentIndex
				let oldItem = this.screen.list[oldIndex]
				// 点击同一个item 改变升序和降序
				if (index === oldIndex) {
					return oldItem.status = oldItem.status === 1 ? 2 : 1
				}
				let newItems = this.screen.list[index]
				// 点击不同item
				this.screen.currentIndex = index
				// 移除旧item状态
				oldItem.status = 0
				// 增加新的状态
				newItems.status = 1
			}
		}
	}
</script>

<style scoped>

</style>